
let { form, $, layer } = layui;
//面向对象
export default class Reg {
    constructor() {
        this.render();//渲染 页面
        this.handle();//渲染 js
    }
    render() {
        let template = `
        <style>
        .card {
            width: 600px;
            margin: auto;
        }
        </style>
        <div class="layui-card card">
        <div class="layui-card-header">注册</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required|username" placeholder="请输入用户名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入手机号码"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                <input type="radio" name="privilege" value="1" title="管理员">
                <input type="radio" name="privilege" value="0" title="普通用户">
                </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required|password"
                            placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="confirm">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required|confirmPsw"
                        placeholder="请确定密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="regForm">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
        `;
        $("#root").html(template);
    }
    handle() {
        //form.verify({})用于表单的验证方法
        let pswText = '';
        form.verify({
            username: function (value, item) {//value：表单的值、item：表单的DOM对象
                let msg = "";//弹出信息框
                if (!/^\w{6,20}$/.test(value)) {
                    return "用户名格式不正确"
                }
                $.ajax({
                    async: false,//改成同步,用于判断用户名
                    type: "post",
                    url: "/users/usernameExist",
                    data: {
                        username: value
                    },
                    success(res) {
                        if (res.status == 0) {
                            msg = "用户名已经存在";
                        }
                    }
                });
                return msg;
            },
            //判断密码是否一致

            password: function (value, item) {
                if (!/^\w{6,12}$/.test(value)) {//如果不是数字字母...
                    return "密码格式不正确";
                }
                pswText = value;
            },

            confirmPsw: function (value, item) {
                if (pswText != value) {
                    return "两次密码不一致"
                }
            },

            //判断电话号码是否为11位纯数字
            phone: function (value, item) {
                if (!/^1[3-9]\d{9}$/.test(value)) {//第一位从1开始，第二位是3-9，一次
                    return "请输入11位数字号码";
                }
            },
            //邮箱
            email: function (value, item) {
                if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
                    return "邮箱格式不正确";
                }
            }

        });
        //监听提交
        form.on('submit(regForm)', function (data) {//这里的regForm是上面[立即提交]中lay-filter的属性名
            console.log("submit", data.field); //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type: "post",
                url: "/users/reg",
                data: data.field,
                success() {
                    layer.msg("注册成功");//弹出层
                    location.href = "#login";//跳转到登录页面
                    // new Login();//注册成功过跳转登录
                }
            });
            return false;
            
        });
        layui.use('form', function(){
            var form = layui.form;
            form.render();
          });
    }

}